<template>
	 <div class="tabbar">
		 <router-link class="tabbar-item" :to="{path:'/wechatuser/home'}">
			 <div class="tabbar-item-top">
				 <img :src="Flag!=0?require('@/assets/images/wechat/index/public/p1.png'):require('@/assets/images/wechat/index/public/p2.png')" class="tabbar-item-img">
			 </div>
			 <div :class="Flag==0?'tabbar-item-bottom tabbar-active':'tabbar-item-bottom'">首页</div>
		 </router-link>
		 <router-link class="tabbar-item" :to="{path:'/wechatuser/course'}">
			 <div class="tabbar-item-top">
				 <img :src="Flag!=1?require('@/assets/images/wechat/index/public/p3.png'):require('@/assets/images/wechat/index/public/p4.png')" class="tabbar-item-img">
			 </div>
			 <div :class="Flag==1?'tabbar-item-bottom tabbar-active':'tabbar-item-bottom'">课程</div>
		 </router-link>
		 <router-link class="tabbar-item" :to="{path:'/wechatuser/usercenter'}">
			 <div class="tabbar-item-top">
				 <img :src="Flag!=2?require('@/assets/images/wechat/index/public/p5.png'):require('@/assets/images/wechat/index/public/p6.png')" class="tabbar-item-img">
			 </div>
			 <div :class="Flag==2?'tabbar-item-bottom tabbar-active':'tabbar-item-bottom'">我的</div>
		 </router-link>
	 </div>
</template>

<script>

	
export default {
	name : 'Footer',
	props:{
		Flag:{
			type:Number,
			required:true
		}
	},
	data() {
		return {
			url:''
		}
	},
	created: function() {
		
	},
	beforeMount: function() {
		
	},
	mounted: function() {
	
	},
	methods: {
		
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.tabbar{
	  width: 100%;
	  height: 60px;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  border-top:1px solid #e6e6e6;
	  background-color: #ffffff;
	  display: flex;
	}
	.tabbar-item{
	  width: 33.3%;
	  overflow: hidden;
	}
	.tabbar-item-top{
	  width: 20px;
	  height: 20px;
	  overflow: hidden;
	  margin:auto;
	  margin-top: 10px;
	}
	.tabbar-item-img{
	  width: 100%;
	}
	.tabbar-item-bottom{
	  margin-top:4px;
	  color: #dbdbdb;
	  font-size:12px;
	  text-align: center;
	  line-height: 20px;
	}
	.tabbar-active{
	  color: #1296db;
	 }
</style>
